import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text,RadioGroup,Radio,Label, ScrollView, AButton} from '@tarojs/components'
import { DNavBar,DModal,DItemError} from '@/components'
import {AtButton} from 'taro-ui'
import http  from '@/api'
import './userbank.scss'
// import dayjs from 'dayjs'
const bankItem = require('../assets/bankbg.png')
const btnbg = require('../assets/btn_bg.png')
const addbtn = require('./btn_buttom.png');

export default class UserbankBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            title: '我的银行卡',
			isShow:false,
			scrollStyle: window.screen.availHeight,
			footerStatus: false,
			totalPage:1,
			obj1: {
			  page: 1,
			  limit: 10,
			},
			indBack:'',
            list: [
      //               {
						// "addType": "新增方式",
      //                 "belongToBank": "所属银行",
      //                 "cardNumber": "银行卡卡号",
      //                 "cardholderMobile": "持卡人手机号码",
      //                 "cardholderName": "持卡人姓名",
      //                 "cbcId": "id",
      //                 "code": "string",
					 //   checked:false,
      //                 "comId": "企业ID",
      //                 "createBy": "创建人",
      //                 "createTime": "创建时间",
      //                 "createWay": "创建方式：0：平台新增1：企业新增",
      //                 "modifyBy": "修改人",
      //                 "modifyTime": "修改时间",
      //                 "operatorAccount": "操作人账号",
      //                 "recStatus": "逻辑删除",
      //                 "remark": "备注",
      //                 "status": "状态",
      //                 "unbundleTime": "解绑时间"
      //       },
			
			]
        }
    }
	onClose(){
		this.setState({
			isShow:false
		})
	}
	onLastHandle(){
		this.corporateBankCardInfo(this.state.item)
	}
   getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        }
    userbankHandle = (item) => {
		//let time =  dayjs(new Date())
		this.setState({
			isShow:true,
			item
		})
    }
	corporateBankCardInfo = (item) => {
		//let time =  dayjs(new Date())
		let t = this.getNowFormatDate() 
	       
			http.corporateBankCard({unbundleTime:t,status:0,recStatus:'1',cbcId:item.cbcId}).then(res=>{
			 Taro.navigateTo({
			     url: '/pages/userbank/clearbank'
			 })
			  this.setState({
				  list:this.state.list.filter(items=>items.cbcId!=item.cbcId),
				  isShow:false
			  })
			})
	}
   componentDidMount(){
	   
   }
   componentWillMount(){
	   //let time =  dayjs(new Date())
	   let t = this.getNowFormatDate() //time.year()+'-'+(Number(time.month())+1)+'-'+time.date()
	   console.log("dayjs(new Date())",t)
	   if(this.$router.params.ty){
		   console.log("object",http)
		  
	   }
	   this.getBackInfo()
   }
   selectBackLoc(){
	   let {indBack,list} = this.state
	  let checkList = list.filter(item=>item.cbcId==indBack)
	  Taro.showLoading()
	  checkList = checkList?checkList:[]
	  if(list){
		  debugger
		 if (checkList.length) {
		  localStorage.setItem('chooiseBankList',JSON.stringify(checkList[0]))
		 } 
	  }else{
		 // Taro.navigateTo({
		 //     url: '/pages/adduserbank/adduserbank'
		 // }) 
		 
	  }
	  Taro.navigateBack({
	      delta: 1
	  }).then(() => {
	      Taro.hideLoading()
	  })
   }
   getBackInfo(params){
	   let { page, limit, orStage } = this.state.obj1
	   let { totalPage } = this.state
	   let obj = {
	     page,
	     limit,
		 ...params
	     // creatorId: creatorId,//订单买方id
	     // orStage: active ? +active + 1 : orStage  //tab状态
	   }
	   if (page > totalPage) {
	     return this.setState({
	       footerStatus: true
	     })
	   }
	   http.searchBankCardAppList().then(res=>{

	   		  let list = res
			   this.setState({
				   list
			   })
	   })
   }
   onChangeRadio({detail}){
	   let {value:indBack}  = detail
	   
	   this.setState({
		   indBack
	   })
   }
    onActiveHandle() {
        Taro.navigateTo({
            url: '/pages/adduserbank/adduserbank'
        })
    }
   onScroll = () => {
     // console.log(this.state.obj1.page)
     this.setState({
       obj1: {
         ...this.state.obj1,
         page: this.state.obj1.page + 1
       }
     }, () => {
       this.getBackInfo()
     })
   }
   onClickRgIconSt(){
	   Taro.navigateTo({
		   url:'/pages/adduserbank/adduserbank'
	   })
   }
    render() {
        const { title, list,
     scrollStyle,
	 isShow,
     footerStatus, } = this.state
		const isSelect = this.$router.params.ty
        const itenBankHtml = () => {
            return !isSelect?list.map((item, i) => {
                return <View className='b_userbank__content_bank' key={i}>
                    <Image className='b_userbank__image' src={bankItem}></Image>
                    <View className='b_userbank__info'>
                        <View className='b_userbank__info_name'>{item.cardholderName}</View>
                        <View className='b_userbank__info_bank'>{item.belongToBank}</View>
                        <View className='b_userbank__info_account'>{item.cardNumber}</View>
                    </View>
                    <View className='b_userbank__btn' onClick={this.userbankHandle.bind(this,item)}>
                        <Image className='b_userbank__image' src={btnbg}></Image>
                        {
                             <Text className='b_userbank__btn__text'>{'解绑'}</Text>
                        }
                    </View>
                </View>
            }):<RadioGroup onChange={this.onChangeRadio.bind(this)} >{
			 list.map((item, i) => {
		        return   	<Label for={i}  key={i}>
				  <Radio  value={item.cbcId} checked={item.checked}>
				<View className='b_userbank__content_bank radio-list' >
		            <Image className='b_userbank__image' src={bankItem}></Image>
				   <View className='b_userbank__info' >
					<View className='b_userbank__info_name'>{item.cardholderName}</View>
					<View className='b_userbank__info_bank'>{item.belongToBank}</View>
					<View className='b_userbank__info_account'>{item.cardNumber}</View>
					 </View>
			
		            {/*<View className='b_userbank__btn' onClick={this.userbankHandle.bind(this)}>
		                <Image className='b_userbank__image' src={btnbg}></Image>
		                {
		                    item.text && <Text className='b_userbank__btn__text'>{item.text}</Text>
		                }
		            </View>*/}
		        </View>
					 </Radio>
		    	</Label>
		    })
			}</RadioGroup>
        }

        return (
		
            <View className="b_userbank">
                <DNavBar title={title} rightFirstIconType={isSelect?'add':''} onClickRgIconSt={this.onClickRgIconSt.bind(this)}></DNavBar>
                <View className="b_userbank__box">
                    <View className="b_userbank__content">
					      <ScrollView
					        scrollY
					        scrollWithAnimation
					        lowerThreshold='20'
					        style={`height:${scrollStyle - 140}px`}
					        onScrollToLower={this.onScroll}>
                        {itenBankHtml()}
						 {list.length === 0 && <DItemError></DItemError>}
						{
						    footerStatus && <View className='b_userbank__more'>暂无更多</View>
						  }
						</ScrollView>
                    </View>
                </View>
                <View className='b_userbank__add' >
                    {!isSelect&&<Image src={addbtn} className='b_userbank__image'></Image>}
                   {!isSelect&&<Text className='b_userbank__add_text' onClick={this.onActiveHandle.bind(this)}>+ 新增银行卡</Text>}
                   {isSelect&&<View className='at-row' ><AtButton onClick={this.onClickRgIconSt.bind(this)} className='at-col at-col-5' size='small'>新增 </AtButton><AtButton  className='at-col at-col-5' type="secondary" onClick={this.selectBackLoc.bind(this,'1')} size='small' >确定 </AtButton></View>} 
				</View>
				<DModal
				  isShow={isShow}
				  title='是否确认解绑该银行卡?'
				  text={''}
				  firstbtn='取消'
				  lastbtn='立即解绑'
				  onFirst={this.onClose.bind(this)}
				  onCancel={this.onClose.bind(this)}
				  onLast={this.onLastHandle.bind(this)}
				></DModal>
            </View>
        )
    }
}
